import { memo } from "react";

function SlowItem({ index }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // Do nothing for 1 ms per item to emulate extremely slow code
  }

  return <li className="item">Item #{index + 1}</li>;
}

export default function memo(SearchResults({ query }) {
  console.log("query", query);
  if (query === "") {
    return null;
  }

  const albums = [];

  for (let i = 0; i < 1000; i++) {
    albums.push(<SlowItem key={i} index={i} />);
  }

  return <ul>{albums}</ul>;
})
